<template>
  <div class="role-management">
    <div class="page-header">
      <div class="page-title">角色管理</div>
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>
        新增角色
      </el-button>
    </div>
    
    <div class="page-content">
      <el-table :data="roleList" border>
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="code" label="角色编码" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const roleList = ref([])

const loadRoles = () => {
  // 模拟数据
  roleList.value = [
    { id: 1, name: '超级管理员', code: 'admin', description: '系统管理员' },
    { id: 2, name: '普通用户', code: 'user', description: '普通用户' }
  ]
}

const handleAdd = () => {
  console.log('新增角色')
}

const handleEdit = (row) => {
  console.log('编辑角色', row)
}

const handleDelete = (row) => {
  console.log('删除角色', row)
}

onMounted(() => {
  loadRoles()
})
</script>

<style scoped>
.role-management {
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--box-shadow-base);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-color-lighter);
}

.page-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color-primary);
}

.page-content {
  padding: 20px;
}
</style>
